<template>
  <!-- {{  props.barcodeList }} -->
  <div class="print-show" >
    <!-- <el-button type="warning" @click="handlePrint">printJs打印</el-button> -->
    <div ref="print" id="barcode" style="margin: 5px auto;width: 480px; height: 480px;flex-wrap: wrap;">
      <div v-for="(item, index) in props.barcodeList" :key="index"  style="margin: 5px auto;page-break-after:always;width:470px; height:470px; display: flex; align-items: center; justify-content: center;margin-bottom: 10px;">
        <!-- <div class="tableBox" style="width: 460px; height:460px;display: flex; justify-content: center; align-items: center; border: 1px solid red;"> -->
          <table style="border-collapse: collapse;width: 420px; height: 420px;" >
            <tr>
              <!-- <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" rowspan="2"><img :src="item.Twocode" /></td> -->
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; " rowspan="2"><img :src="item.Twocode" /></td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">箱号</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="3">{{ item.barcode }}</td>
            </tr>
            <tr>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">供应商单号:</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="3">{{ item.supplierOrder }}</td>
            </tr>
            <tr>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">采购订单：</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4">{{ item.fbillno }}</td>
              <!-- <td style="border: solid 1px #000; text-align: center; padding: 5px 10px" colspan="4">QWC-2212-150139联丰BS26/BS25/BS18/BS17/MJ191/BS17/MJ191</td> -->

         
            </tr>
            <tr>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">存货编码：</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="3">{{ item.fmaterialid }}</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">数量:{{ Number(item.quantity) }}</td>
            </tr>
            <tr>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">存货全名：</td>
              <td style="border: solid 1px #000; text-align: center;  padding: 5px 3px" colspan="4">{{ item.fmaterialname }}</td>
              <!-- <td style="border: solid 1px #000; text-align: center;  padding: 5px 10px" colspan="4">标签-56ml-UV胶-UV001-灰瓶-瓶标+盖标-新+盖标-新</td> -->
            </tr>
            <tr>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">本箱数量：</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px"></td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">个</td>
              <td style="border: solid 1px #000; text-align: center;  padding: 5px 3px; width: 20px" rowspan="2">物料箱号</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap;" rowspan="2"><img :src="item.TwocodefMaterialid" /></td>
            </tr>
            <tr>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">发货日期：</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2">{{ item.deliverydate }}</td>
            </tr>
            <tr>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">生产日期：</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px"></td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">有效日期：</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="2"></td>
            </tr>
            <tr>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px">备注：</td>
              <td style="border: solid 1px #000; text-align: center; white-space: nowrap; padding: 5px 3px" colspan="4"></td>
            </tr>
          </table>
        <!-- </div> -->
      </div>
    </div>
  </div>
</template>

 
<script lang="ts" setup>
import { ref, watchEffect } from 'vue'
// import { getLodop } from '/admin/utils/LodopFuncs'
import printJS from 'print-js'
import { PDFDocument, rgb } from 'pdf-lib'
import Vue from 'vue'
import VueToPdf from 'vue-to-pdf'
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'
// 使用pdf-lib的代码...
const props = defineProps({
  barcodeList: Array,
  PrintNow: Boolean,
  output: Boolean,
})

// console.log('打印页面', props.printingArr)
// console.log('接受打印数据', props.barcodeList)
const print = ref()
const content = ref(null)

let emit = defineEmits(['send-data'])

watchEffect(() => {
  if (props.PrintNow == true) {
    console.log('触发更新：', props.PrintNow)
    triggerEvent()
    emit('send-data')
  }
  if (props.output == true) {
    console.log('触发导出：', props.output)
    // triggerOutput()
    triggerEvent()
    emit('send-data')

    // exportToPDF()
  }
})

let triggerEvent = () => {
  printJS({
    printable: 'barcode', // 要打印的元素的ID或HTML字符串
    type: 'html', // 打印内容的类型，可以是'html'、'image'、'pdf'等
    targetStyle: ['*'],
    scanStyles: false,
  })
}

let exportToPDF = () => {
  let htmlNode = document.getElementById('barcode')
  html2canvas(htmlNode).then(function (canvas) {
    var imgData = canvas.toDataURL('image/png')
    var pdf = new jsPDF('p', 'mm', [200, 200])
    pdf.addImage(imgData, 'PNG', 0, 0)
    pdf.save('table.pdf')
  })
}
</script>

<style lang="css" scoped>
.print-show {
  border: 1px solid #ccc;
  box-shadow: 2px 3px 10px #ccc;
  border-radius: 10px;
  width: 100%;
  height: 60vh;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ccc;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 5px;
}

.bordered-table {
  border-collapse: collapse;
}

/* .bordered-table th,
.bordered-table td {
  border: 1px solid #000;
  padding: 8px;
} */
</style>

<!-- <style lang="scss" scoped>
 @media print {
  * {
    margin: 0 !important;
    padding: 0 !important;
  }
  .LocationTemplate {
    border: 2px solid red;
    width: 400px !important;
    height: 400px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .LocationTemplate .box {
    padding: 10px 20px !important;
    box-sizing: border-box !important;
    width: calc(90% / 6 * 4) !important;
    height: 90% !important;
    border: 2px solid #000 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-evenly !important;
  }
  .box .item {
    width: 100%;
    height: 100%;
    font-weight: 600 !important;
  }
  .item-center {
    font-size: larger !important;
    text-align: center !important;
  }

  .imgBox {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 50px !important;
    height: 50px !important;
  }
} 
</style> -->
 
 <!-- <style>

* {
  margin: 0 !important;
  padding: 0 !important;
}
ul {
  list-style: none !important;
}
.LocationTemplate {
  border: 1px solid green !important;
  width: 500px !important;
  height: 500px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.box {
  padding: 10px 20px !important;
  box-sizing: border-box;
  width: calc(90% / 6 * 4);
  height: 90%;
  border: 2px solid #000;
}
.box ul {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.box ul li:last-child {
  width: 100%;
  height: 45%;
  /* border: 1px solid #000; */
  /* background-color: antiquewhite; */
  display: flex;
  align-items: center;
  justify-content: center;
}

.box ul li {
  font-weight: 600;
  /* border: 1px solid green; */
}
.li-center {
  font-size: larger;
  text-align: center; white-space: nowrap;
}

.imgBox {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 80%;
  border: 1px solid #000;
}

img {
  display: inline-block;
  width: 90%;
}
</style> -->
